<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>专业</title>

    <!-- Google Font: Source Sans Pro -->
    <!--  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">-->
    <!-- Font Awesome -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='plugins/fontawesome-free/css/all.min.css') }}>
    <!-- Theme style -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='adminlte/css/adminlte.min.css') }}>
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}>

</head>
<body class="hold-transition sidebar-mini layout-fixed layout-top-nav">
<div class="wrapper" id="div-wrapper" data="{{info}}">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" onclick="window.location.href = '/index'">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Content Wrapper. Contains page content -->
<!--        <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">-->
        <!--        <div class="nav navbar navbar-expand navbar-white navbar-light p-0">-->
        <!--        </div>-->
    <div class="content-wrapper">
        <div class="tab-content">
            <div class="tab">
                <div class="title" style="padding:20px;">
                    <h2 class="display-4 text-center" id="h-type">专业</h2>
                    <h2 class="display-5 text-center">请确认文件后点击计算按钮进入下一步</h2>
                </div>

                <div class="card card-primary" style="margin:20px;">
                    <div class="card-header">
                        <h3 class="card-title">文件列表</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="form" action="/finish" method="post">
                        <div class="card-body" id="div-form" data="{{form_list}}">

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button id="btn-submit" class="btn btn-primary">计算</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer" >
        <strong>Copyright &copy; 2022 <a href="">Test</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 1.0.0
        </div>
    </footer>

    <!-- Control Sidebar -->
<!--    <aside class="control-sidebar control-sidebar-dark">-->
<!--        &lt;!&ndash; Control sidebar content goes here &ndash;&gt;-->
<!--    </aside>-->
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src={{ url_for(
'static', filename='plugins/jquery/jquery.min.js') }}></script>
<!-- jQuery UI 1.11.4 -->
<script src={{ url_for(
'static', filename='plugins/jquery-ui/jquery-ui.min.js') }}></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
    function refreshSelect(path,selectId) {
        $.get('/check-file?path='+path, function (res) {
            let resJson = JSON.parse(res);
            if (resJson.success === true) {
                let resData = resJson.data;
                $(selectId).empty();
                for (let index in resData) {
                    $(selectId).append($('<option>').val(resData[index].path).text(resData[index].path));
                }
            }
        })
    }
    if (!String.prototype.format) {
        String.prototype.format = function() {
            let args = arguments;
            return this.replace(/{(\d+)}/g, function(match, number) {
                return typeof args[number] != 'undefined'
                    ? args[number]
                    : match
                    ;
            });
        };
    }
    // init
    const FORM_GROUP_LIST = eval( $('#div-form').attr('data'));
    const INFO = eval( $('#div-wrapper').attr('data'))[0];
    const group = "                       <div class=\"form-group\">\n" +
        "                                <label id=\"label{0}\" for=\"select${0}\">&ensp;文件</label>\n" +
        "                                <div class=\"row\">\n" +
        "                                    &ensp;\n" +
        "                                    <button id=\"btn-refresh{0}\" type=\"button\" class=\"btn btn-outline-primary btn-sm col-md-2\">\n" +
        "                                        <i class=\"fa fa-circle-notch\"></i>&ensp;刷新\n" +
        "                                    </button>\n" +
        "                                    &ensp;&ensp;\n" +
        "                                    <button id=\"btn-open-dir{0}\" type=\"button\" class=\"btn btn-outline-primary btn-sm col-md-2\">\n" +
        "                                        <i class=\"fa fa-folder-open\"></i>&ensp;打开文件夹\n" +
        "                                    </button>\n" +
        "                                </div>\n" +
        "                                <select id=\"select{0}\" class=\"custom-select form-control-border\">\n" +
        "                                </select>\n" +
        "                            </div>"

    $(document).attr('title',INFO['name']);
    $('#h-type').html(INFO['name']);
    $('#form').attr('action','/finish/'+INFO['subject_type']);
    for (let index in FORM_GROUP_LIST) {
        $('#div-form').append(group.format(index));
        let name = FORM_GROUP_LIST[index]['name'];
        let path = FORM_GROUP_LIST[index]['dir_path'];
        $('#label'+ index).html("&ensp;文件"+name);
        refreshSelect(path,"#select"+index);
        $('#select'+ index).attr("name",name);
        $('#btn-refresh'+ index).click(function() {
            refreshSelect(path,"#select"+index);
        });
        $('#btn-open-dir'+ index).click(function() {
            $.get('/open-dir?path='+path);
        });
    }

    $('#btn-submit').click(function() {
        $('#form').submit();
    });
</script>
<!-- Bootstrap 4 -->
<script src={{ url_for(
'static', filename='plugins/bootstrap/js/bootstrap.bundle.min.js') }}></script>
<!-- overlayScrollbars -->
<script src={{ url_for(
'static', filename='plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}></script>
<!-- AdminLTE App -->
<script src={{ url_for(
'static', filename='adminlte/js/adminlte.js') }}></script>
<!-- AdminLTE for demo purposes -->
<!--<script src="dist/js/demo.js"></script>-->
</body>
</html>
